<template>
  <div class="section-page">
    <div class="tab-wrap">
      <div v-if="tabActive === 0">
        <h3 class="section-title" style="text-decoration:none;">进度管理详情</h3>
        <div class="section-header mt10">
          <el-button-group class="button-group mt10">
            <el-button
              type="default"
              class="btn-c-default"
              @click="clickDevice(1, 'device')"
              >设备齐套进度</el-button
            >
            <el-button
              type="default"
              :class="
                tabName === 'experiment' ? 'btn-c-primary' : 'btn-c-default'
              "
              @click="clickDevice(0, 'experiment')"
              >综合实验进度</el-button
            >
            <el-button
              type="default"
              :class="tabName === 'system' ? 'btn-c-primary' : 'btn-c-default'"
              @click="clickDevice(0, 'system')"
              >系统交付进度</el-button
            >
          </el-button-group>
          <el-form class="modify-form flex-center" inline>
            <el-form-item class="search-form-item">
              <div class="s-input" style="margin-top: 5px;">
                <input
                  type="text"
                  v-model="searchData.sysCode"
                  @keyup.enter="searchHandle"
                  placeholder="系统代号"
                />
                <!-- <img
                  src="@/assets/images/search.png"
                  alt="搜索按钮"
                  @click="searchHandle"
                /> -->
              </div>
            </el-form-item>
            <el-form-item class="search-form-item">
              <div class="s-input" style="margin-top: 5px;">
                <input
                  type="text"
                  v-model="searchData.sysSubCode"
                  @keyup.enter="searchHandle"
                  placeholder="分系统代号"
                />
                <img
                  src="@/assets/images/search.png"
                  alt="搜索按钮"
                  @click="searchHandle"
                />
              </div>
            </el-form-item>
            <el-form-item class="search-form-item">
              <import-data :api-url="importUrl" title="导入数据" :params="importParams" @upload-success="uploadSuccess"/>
            </el-form-item>
            <el-form-item class="search-form-item">
              <a class="btn-40 btn-img hover" title="模板下载" :href="templateUrl" download="进度管理_模板.xlsx">
                <span class="icon-img download"></span>
              </a>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="mt5" v-if="tabName === 'device' && tabActive !== 1">
        <c-table
          is-selection
          :loading="loading"
          :table-column="tableColumn"
          :table-data="tableData"
          :operation="false"
          :is-delete="false"
          @on-save="onSave"
        ></c-table>
        <div style="padding: 10px;text-align: center;">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="pageOption.pageSize"
            :total="pageOption.total"
            :page-sizes="pageOption.sizes"
            @size-change="sizeCurrentChange"
            @current-change="pageCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
      <template v-else>
        <div v-if="tabActive === 1">
          <device :id="id" @back="clickDevice" @refresh-sub="refreshSub" />
        </div>
        <component
          v-else
          :is="componentId"
          :id="id"
          :params="searchParams"
          @refresh-sub="refreshSub"
        ></component>
      </template>
    </div>
  </div>
</template>

<script>
import ImportData from '@/components/ImportData.vue'
import { tableColumn } from './data'
import device from './device'
import system from './system'
import experiment from './experiment'
import { overviewApis } from '@/apis'
import templateUrl from '@/template/进度管理_模板.xlsx'

export default {
  props: ['id'],
  components: {
    device,
    system,
    experiment,
    ImportData
  },
  data() {
    return {
      tabActive: 0,
      tabName: 'device',
      loading: false,
      tableColumn,
      tableData: [],
      componentId: null,
      searchData: {
        sysCode: '',
        sysSubCode: '',
      },
      // 子组件传参
      searchParams: {
        sysCode: '',
        sysSubCode: '',
      },
      pageOption: {
        page: 1,
        pageSize: 10,
        total: 0,
        sizes: [5, 10, 20, 30, 40, 50, 100],
      },
      templateUrl,
      importUrl: overviewApis.progressImportUrl,
    }
  },
  computed: {
    importParams() {
      return {modelId: this.id}
    }
  },
  mounted() {
    this.progressFindPageInfo()
  },
  methods: {
    refreshSub() {
      this.$emit('refresh-sub')
    },
    async progressFindPageInfo() {
      const {page, pageSize} = this.pageOption
      this.loading = true
      const { data } = await overviewApis.progressFindPageInfo({
        modelId: this.id,
        ...this.searchData,
        pageNum: page,
        pageSize
      })
      const {list, total} = data
      this.tableData = list.map((item) => {
        return {
          ...item,
          edit: false,
        }
      })
      this.pageOption.total = total
      this.loading = false
    },
    //保存
    onSave(row) {
      const params = {
        id: row.id,
        sysNo: row.sysNo,
        sysSubNo: row.sysSubNo,
      }
      this.progressSetProgressNo(params)
    },
    searchHandle() {
      if (this.tabName === 'device' && this.tabActive !== 1) {
        this.pageOption.page = 1
        this.progressFindPageInfo()
      } else {
        Object.assign(this.searchParams, this.searchData)
      }
    },
    sizeCurrentChange(size) {
      this.pageOption.pageSize = size
      this.progressFindPageInfo()
    },
    pageCurrentChange(page) {
      this.pageOption.page = page
      this.progressFindPageInfo()
    },
    async progressSetProgressNo(params) {
      const { code } = await overviewApis.progressSetProgressNo(params)
      if (code === 200) {
        this.progressFindPageInfo()
      }
    },
    clickDevice(tabActive, type) {
      this.tabActive = tabActive
      this.tabName = type
      if (type === 'experiment') {
        this.componentId = experiment
      } else if (type === 'system') {
        this.componentId = system
      }
    },
    uploadSuccess() {
      this.searchData.sysCode = ''
      this.searchData.sysSubCode = ''
      this.searchParams.sysCode = ''
      this.searchData.sysSubCode = ''
      this.clickDevice(0, 'device')
    }
  },
}
</script>

<style lang="scss" scoped></style>
